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The Challenges Facing 
Product Teams Today 


As a product team grows, its processes become more difficult to 
manage. 

Without a standardized workflow or toolkit, the team’s inefficiencies 
and inconsistencies will eventually work their way back into the 
product. 

Software is often built by incredibly large teams of people. The 
challenge to create coherent experiences multiplies exponentially 
as more people are added to the mix. Over time, no matter how 
consistent or small a team is, different people will contribute new 
solutions and styles, causing experiences to diverge. 

Building a Visual Language, Karri Saarinen, 
Principal Designer and creator of Airbnb design system 

Based on working with thousands of customers around the world, 
we’ve seen four patterns emerge through the years. 
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1. Inconsistencies across products and platforms 

UX inconsistencies reduces the user’s efficiency, which devalues 
the product. 

Especially common in enterprise products that span different 
technology stacks, devices, and user groups, product inconsistency 
is nearly impossible to resolve until the company’s workflows are 
first addressed. 

2. Lack of centralized assets leads to version control issues 

Because different design teams use different tools that don’t always 
integrate, nobody can truly guarantee that the right assets are all 
being used in projects at any given time. 

If the tools are desktop-based, version control issues become even 
more of a pain. Designers must follow a strict naming convention, 
otherwise the wrong assets will eventually make it to development. 

3. Widening knowledge gaps between product teams 

Without a “golden source” of assets and best practices, different 
teams work off different guidelines and assumptions. Over time, 
product inconsistency is inevitable. 

4. Inefficient processes lead to repetitive or wasted work 

Without a common toolkit for design and development, one-off 
solutions and repetitive work drain a team’s efficiency. 
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Iteration cycles planned for 1-2 weeks may require 2-3x the time 
because designers find themselves creating common elements and 
pages from scratch. The inefficiency multiplies as designers redline 
those assets for handoff and developers code up new solutions. 


Conclusion 

All of the above pain points are interconnected. 

To improve product consistency and team efficiency, it helps to con¬ 
solidate assets and workflows between designers and developers. 

Otherwise, the ongoing pain of unscalable design remains the reality. 

When I joined Spotify’s design team in 2012, the level of incon¬ 
sistency and fragmentation shocked me. Up-close, the treatment 
of type, colour, imagery, layout, IA, and interactions just didn’t 
seem to align anywhere. We concluded the fragmentation in the 
product was just reflecting the fragmentation in the team, that 
designers spread across so many different projects, timezones 
and competing timetables, just didn’t stand a chance. 


Design Doesn’t Scale, Stanley Wood, Design Director at Spotify 


Enter the Design System 


Popularized by companies like Salesforce and Airbnb, design sys¬ 
tems give product teams a reusable, component-based approach to 
product development. 

A design system can create value on at least two levels. At the 
team level, it can create a more streamlined, predictable process 
that reduces design and engineering time. At the UX level it helps 
deliver consistency and predictability in the interface, and to 
raise the quality of the experience overall when designers and 
engineers are freed up to think about higher-order tasks. 

Selling Design Systems At Your Company, 

Nick Stamas, Creative Lead at WeWork 
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The Single Source of Truth 

A design system is more than just a style guide or pattern library - it’s 
the blueprint for product development. 

All the design principles, visual assets, and patterns are thoroughly 
documented. All code references are included for each piece of design. 
As a result, design can scale right alongside development. 

What is a Design System? 

- BUILDING BLOCKS - 


Typographic Scales ■ Color Schemes ■ Grid Definitions ■ Icons ■ image assets 


Ul PATTERNS 


Templates ■ Modules ■ Components H Elements 


RULES 


Design Principles I Implementation Guidelines I Do‘s and Don'ts I Editorial Guidelines 


The ROI of Design Systems 

1. Increased velocity and time to market 

A component-based toolkit accessible in one place allows for a 
more chunked-out Agile process, speeding up releases without 
compromising quality. 
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2. Increased product value 

Reusable components build upon each other, which creates a 
consistent look, feel, and behavior to the product. As consistency 
increases, so too does user efficiency. 

3. Increased collaboration and knowledge sharing 

Because the shared design system includes approved assets and 
conventions, designers and developers are more autonomous 
without closing off into silos. 

4. Less time and money wasted 

Because designers and developers aren’t caught up in redundant 
questions or repetitive work, they’re freed up for projects that 
deliver more business value. 

An estimated $1.5MM+ in annual savings or 21.25% time saved 
for a typical product development annual budget (based on on¬ 
shore/offshore team of 100 resources) 

What Is a Design System and What Are It’s Benefits? 

Projekt 202 


Building the Design System 


Here’s the simple truth:you can’t innovate on products without 
first innovating the way you build them. 

The Way We Build, Karri Saarinen, 
Principal Designer and creator of Airbnb design system 

1. Create your interface inventory 

To quickly identify current inconsistencies, start by creating an 
inventory of everything in your product UI: color palette, text 
styles, and UI patterns. The inventory is your strongest tool for 
selling the need for a design system. 

1. Review the interface and code and list all the colors and text- 
styles you can find. 

2. Take screenshots of UI patterns or copy patterns from your 
projects. Place all the screenshots in one place. 
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3. Categorize your patterns by their purpose (e.g. buttons, form- 
fields, navigation etc). 

4. Mark inconsistencies between the patterns and create a pre¬ 
sentation for your team. 


2. Get buy-in from the team 

As you present the inconsistencies reflected in your interface in¬ 
ventory, emphasize the ROI of the design system. 


Engineers respond well to the source control, improved modu¬ 
larity, and increased autonomy. Business stakeholders respond 
well to the faster time to market, increased product value, and 
less resources wasted. 
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3. Define your design principles 

Before you build your new system, create a set of general prin¬ 
ciples for a coherent experience. What universal values should 
designers to keep in mind? 


Design Principles 


We constantly keep these core principles in mind when making design decisions at Salesforce, and we encourage you to adopt them as well 



CLARITY 


Eliminate ambiguity. Enable people to see, understand* and act 
with confidence. 


EFFICIENCY 


Streamline and optimize workflows. Intelligently anticipate needs 
to help people work better, smarter, and faster. 




Create familiarity and strengthen intuition by applying the same 
solution to the same problem. 



RFALJTY 


Demonstrate respect for people's time and attention through 
thoughtful and elegant craftsmanship. 


Photo credit: The design principles behind Salesforce Lightning 


Use your principles as a review heuristic for every new pattern 
proposed for the design system and every new project. 
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4. Unify your visual design 

Think about the most fundamental and repetitive patterns in your 
interface. 


Colors, text-styles, icons will probably come to mind first. Perhaps 
also some interactive patterns (hover on clickable elements), border 
visual properties, or maybe animations? Discuss with the team to 
decide which version of these elements will be canonical. Then, 
document them as part of the system. 
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Photo credit: Our internal design system created in UXPin. 


5. Create your interactive component library 

Once you have the foundation well-defined, start adding your 
approved interface patterns to the shared library. Keep them up¬ 
dated and encourage the team to use them in every subsequent 
project - your efficiency and consistency will improve drastically. 
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Finally, plan a process of suggesting new patterns to make sure 
that everyone in the product team has a say in the evolution of 
the design system. 


Default library v- 

Colors Text styles Assets Ul Patterns 

All III Patterns v- Q ype to search 

BUTTONS 


NORMAL 


Normal 



Floating Normal 


Floating Download 


PRESSED 


Pressed 


* 

Floating Pressed 



Floating Upload 


Disabled 


e 

Floating Close 



Floating Print 


Photo credit: An interactive design systems library in UXPin 








Design Systems in UXPin 


One platform for consistent design and development. 
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Design Language 

Sync Sketch with UXPin for 
a consistent design language: fonts, 
colors, icons, assets, and more. 



Ul Patterns 


Scale designs consistently with 
Symbols and interactive components. 


%=> 



Automated Documentation 

Documentation syncs everywhere 
and travels with library elements. 


@ Modular design 
and development 

Scale quickly with design system 
libraries. 


0 One source of truth 
for everyone 

Close your knowledge gaps. 
Formalize your design and code 
conventions. 


0 Painless documentation 
and developer handoff 

Eliminate busywork. Generate style 
guides, specs, and documentation. 


U 

Tracy Dendy 
HBO 


My productivity and developer productivity have both increased. 
They love that they can collaborate and move quickly to a powerful 
experience. 


To book a demo, call +1 (855) 223-9114 or email us at sales@uxpin.com 
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0 Design: 

Create lifelike prototypes 
quickly with Photoshop 
and Sketch integration. 



Q 


Collaborate: 

Get feedback and 
co-design on any project 
anywhere. 


O© 

© Iterate: 

Built-in version control 
improves efficiency and 
eliminates confusion. 




© Scale: 

Automate consistency 
and documentation with 
design systems (syncs 
with Sketch). 



Document: 

Cleanly annotate your 
designs. Insert custom 
code snippets that travel 
with elements. 



Implement: 

Auto-generate style 
guides, assets, and 
specs for developers. 


Try UXPin now 





























